<template>
  <div class="sql-parser">
    <h1>解析SQL</h1>
    <el-input
      type="textarea"
      v-model="sqlQuery"
      placeholder="输入SQL语句"
      :autosize="{ minRows: 5, maxRows: 100 }"
    ></el-input>
    <el-button type="primary" :loading="loading" @click="parseSQL">解析</el-button>
    <div v-if="result">
      <h3>解析结果</h3>
      <pre>{{ result }}</pre>
    </div>
  </div>
</template>

<script>
import {explain} from '../api/sql';
export default {
  name: 'SqlParser',
  data() {
    return {
      sqlQuery: '',
      loading: false,
      result: null
    };
  },
  watch: {
    sqlQuery() {
      this.result = null;
    }
  },
  methods: {
    async parseSQL() {
      this.loading = true;
      this.result = await explain({
        data: this.sqlQuery
      })
      this.loading = false;
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
